import React, { memo, useState } from "react";
import { Tabs, Tooltip } from "antd";
import ResetStyle from "@/pages/OrderModule/common/components/ResetStyle";
import { QuestionCircleOutlined } from "@ant-design/icons";
import ListTable from "./ListTable";

const { TabPane } = Tabs;
const MemberPrice = ({}) => {
	const [tab, setTab] = useState("0");

	const renderTip = text => {
		return (
			<Tooltip title={<span style={{ color: "#555" }}>{text}</span>} color="#fff">
				<QuestionCircleOutlined />
			</Tooltip>
		);
	};

	return (
		<div style={{ height: "100%", overflowY: "scroll" }}>
			<Tabs
				activeKey={tab}
				defaultActiveKey="0"
				onChange={val => {
					setTab(val);
				}}
			>
				<TabPane
					tab={
						<>
							待审核
							{renderTip(
								"该页面用于您已申请的会员价，待供应商审核状态展示，以及拿货员/供应商改价时，由您审核是否需要生成新的会员价（精准匹配的，同供应商商品匹配关系的系统商品会员价都是一致的）"
							)}
						</>
					}
					key="0"
				></TabPane>
				<TabPane tab="使用中" key="1"></TabPane>
				<TabPane
					tab={
						<>
							审核失败
							{renderTip("未通过您或供应商审核的会员价，不会更改原会员价")}
						</>
					}
					key="2"
				></TabPane>
				<TabPane
					tab={
						<>
							已作废
							{renderTip("供应商取消了您已申请的会员价")}
						</>
					}
					key="3"
				></TabPane>
			</Tabs>
			{tab === "0" && <ListTable status={0} />}
			{tab === "1" && <ListTable status={1} />}
			{tab === "2" && <ListTable status={2} />}
			{tab === "3" && <ListTable status={3} />}
		</div>
	);
};
export default memo(ResetStyle(MemberPrice, { wrappers: ["rule-reset"], style: { height: "100%" } }));
